import { useState } from "react";
import { Popup } from "@antmjs/vantui";
import { Calendar, DatetimePicker, Picker } from "@taroify/core";
import { Arrow } from "@taroify/icons";
import { View, Text } from "@tarojs/components";
import { IMainContent, useCheckAndFillInStore } from "../../../store";

const MainContent: React.FC = () => {
  const { mainContent } = useCheckAndFillInStore();
  const options = [
    {
      label: "食品品种",
      key: "foodType",
    },
    {
      label: "自查日期",
      key: "inspectionTime",
    },
    {
      label: "检查人员",
      key: "personCount",
    },
    {
      label: "选择周期",
    },
  ];

  const [selectInsTimeShow, setSelectInsTimeShow] = useState(false);

  const [value, setValue] = useState(new Date(2022, 10, 14));

  const [selectPersonCountShow, setSelectPersonCountShow] = useState(false);
  const [selectCycleShow, setSelectCycleShow] = useState(false);

  return (
    <>
      <View className="p-2 bg-white">
        {options.map((_item, _index) => (
          <View
            key={_index}
            className="flex justify-between px-3 h-[80px] items-center text-[28px] border-b-2 border-solid border-[#e2e2e2]"
            onClick={() => {}}
          >
            <View className="flex items-center h-full gap-3">
              <Text className="text-red-500">*</Text>
              <Text>{_item.label}</Text>
            </View>

            {_item.label === "选择周期" ? (
              <View
                onClick={() => {
                  setSelectCycleShow(true);
                }}
              >
                <Text className="p-1 border border-solid rounded">
                  2023-12-25
                </Text>
                <Text>~</Text>
                <Text className="p-1 border border-solid rounded">
                  2023-12-31
                </Text>
                <Arrow />
              </View>
            ) : (
              <View
                onClick={() => {
                  if (_item.label === "自查日期") {
                    setSelectInsTimeShow(true);
                  } else if (_item.label === "检查人员") {
                    setSelectPersonCountShow(true);
                  }
                }}
              >
                <Text>{mainContent[_item.key as keyof IMainContent]}</Text>
                <Arrow />
              </View>
            )}
          </View>
        ))}
      </View>

      {/* 自检日期选择 */}
      <Popup
        show={selectInsTimeShow}
        position="bottom"
        onClose={() => setSelectInsTimeShow(false)}
      >
        <DatetimePicker
          type="date"
          value={value}
          onChange={(e) => {
            console.log(e);
          }}
        >
          <DatetimePicker.Toolbar>
            <DatetimePicker.Button
              onClick={() => {
                setSelectInsTimeShow(false);
              }}
            >
              取消
            </DatetimePicker.Button>
            <DatetimePicker.Title>选择年月日</DatetimePicker.Title>
            <DatetimePicker.Button>确认</DatetimePicker.Button>
          </DatetimePicker.Toolbar>
        </DatetimePicker>
      </Popup>

      {/* 检查人员 */}
      <Popup
        show={selectPersonCountShow}
        position="bottom"
        onClose={() => setSelectPersonCountShow(false)}
      >
        <Picker
          defaultValue="1"
          onChange={(e) => {
            console.log(e);
          }}
        >
          <Picker.Toolbar>
            <Picker.Button
              onClick={() => {
                setSelectPersonCountShow(false);
              }}
            >
              取消
            </Picker.Button>
            <Picker.Title>标题</Picker.Title>
            <Picker.Button>确认</Picker.Button>
          </Picker.Toolbar>
          <Picker.Column>
            <Picker.Option>1</Picker.Option>
            <Picker.Option>2</Picker.Option>
            <Picker.Option>3</Picker.Option>
            <Picker.Option>4</Picker.Option>
          </Picker.Column>
        </Picker>
      </Popup>

      {/* 选择周期 */}
      <Popup
        show={selectCycleShow}
        position="bottom"
        onClose={() => setSelectCycleShow(false)}
        style={{ height: "50%" }}
      >
        <Calendar
          type="single"
          value={value}
          onChange={(e) => {
            console.log(e);
          }}
          formatter={(e) => {
            const _date = new Date(e.value);
            return {
              type: _date.getDay() === 0 ? "start" : "disabled",
              value: e.value,
              children: e.children,
            };
          }}
          //   onConfirm={(newValue) => {
          //     console.log(newValue);
          //   }}
        ></Calendar>
      </Popup>
    </>
  );
};

export default MainContent;
